<template>
  <section class="todoapp">
      <TodosHeader @add="addFn"></TodosHeader>
      <TodosMain :list="showList" @changedss="changedFn" @del="delFn" @modify="modifyFn" @checkAll="checkAllFn"></TodosMain>
      <TodosFooter :list="list" :type="type" @filter="filterFn" @typeC="typeCFn"></TodosFooter>
      
     
    </section>
</template>

<script>
import TodosHeader from './components/TodosHeader'
import TodosMain from './components/TodosMain'
import TodosFooter from './components/TodosFooter'
export default {
  components:{
    TodosHeader,
    TodosMain,
    TodosFooter
  },
  data(){
    return {
      list:[
        {id:1,name:'起床',isDone:true},
        {id:2,name:'洗漱',isDone:false},
        {id:3,name:'打豆豆',isDone:false}
      ],
      type:'all'
    }
  },
  methods:{
    changedFn(id){
       const result = this.list.find(item=>item.id === id)
       result.isDone = !result.isDone
    },
    delFn(id){
      this.list = this.list.filter(item=>item.id !== id)
    },
    addFn(name){
      this.list.push({
        id:Date.now(),
        name,
        isDone:false
      })
    },
    modifyFn(id,name){
      this.list.find(item=>item.id === id).name = name
    },
    filterFn(){
      this.list = this.list.filter(item=>!item.isDone)
    },
    typeCFn(type){
      this.type = type
    },
    checkAllFn(value){
      this.list.forEach(item=>item.isDone = value)
    }
  },
  computed:{
    showList(){
      if(this.type === 'active'){
        return this.list.filter(item=>!item.isDone)
      }else if(this.type==='completed'){
        return this.list.filter(item=>item.isDone)
      }else{
        return this.list
      }
    }
  }
}
</script>

<style>

</style>